<template>
  <div class="file-preview">
    <div class="type-txt" v-if="type==='txt'" :style="wrapperStyle">
      <div class="line" v-for="(item,i) of txtContent" :key="i">{{ item }}</div>
    </div>
    <div class="type-img" v-if="type==='img'" :style="wrapperStyle">
      <img :src="url" alt="">
    </div>
    <div class="type-audio" v-if="type==='audio'" :style="wrapperStyle">
      <audio ref="audioPlayer" :src="url" controls :autoplay="autoplay"></audio>
    </div>
    <div class="type-video" v-if="type==='video'" :style="wrapperStyle">
      <video ref="videoPlayer" :src="url" controls :autoplay="autoplay"></video>
    </div>
    <div class="type-word" v-if="type==='word'" :style="wrapperStyle">
      <vue-office-docx :src="url" style="width:100%;"/>
    </div>
    <div class="type-excel" v-if="type==='excel'" :style="wrapperStyle">
      <vue-office-excel :src="url" style="width:100%;"/>
    </div>
    <div class="type-ppt" v-if="type==='ppt'" :style="wrapperStyle">
      <vue-office-pptx :src="url" style="width:100%;"/>
    </div>
    <div class="type-pdf" v-if="type==='pdf'" :style="wrapperStyle">
      <vue-office-pdf :src="url" style="width:100%;"/>
    </div>
    <div class="type-csv" v-if="type==='csv'" :style="wrapperStyle">
      <el-table :data="tableData" style="width: 100%" height="100%">
        <el-table-column
            v-for="(header, index) in tableHeaders" :key="index" :prop="header" :label="header"
        ></el-table-column>
      </el-table>
    </div>
    <div class="type-md" v-if="type==='md'" :style="wrapperStyle" v-html="markdownContent">
    </div>
  </div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficePptx from '@vue-office/pptx'
import Papa from "papaparse";
import {marked} from "marked";
export default {
  props: {
    type: {
      type: String, required: true, default: 'img',
      validator: function (value) {
        return ['txt', 'img', 'audio', 'video', 'word', 'excel', 'ppt', 'pdf', 'csv', 'md',].includes(value);
      }
    },
    url: {type: String, required: true, default: '',},
    content: {type: String, default: '',},
    autoplay: {type: Boolean, default: false},
    wrapperStyle: {type: Object, default: () => ({}),},
  },
  components: {VueOfficeDocx, VueOfficeExcel, VueOfficePdf, VueOfficePptx},
  watch: {
    type(type) {
      this.init()
    }
  },
  data() {
    return {
      txtContent: '',
      tableData: [],
      tableHeaders: [],
      markdownContent: ''
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      if (this.type === 'txt') {
        this.txtContent = this.content.split(/\r\n|\r|\n/);
      }
      if (this.type === 'csv') {
        Papa.parse(this.url, {
          download: true,
          header: true,
          complete: (result) => {
            this.tableData = result.data;
            this.tableHeaders = Object.keys(result.data[0] || {})
          },
        });
      }
      if (this.type === 'md') {
        const response = await fetch(this.url);
        const markdownText = await response.text();
        const rendererMD = new marked.Renderer();
        marked.setOptions({
          renderer: rendererMD,
          pedantic: false,
          gfm: true,
          tables: true,
          breaks: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          xhtml: false
        });
        this.markdownContent = marked(markdownText);
      }
      if (this.autoplay) this.$nextTick(this.start)
    },
    start() {
      if (this.type === 'audio') this.$refs.audioPlayer.play()
      if (this.type === 'video') this.$refs.videoPlayer.play()
    },
    stop() {
      if (this.type === 'audio') this.$refs.audioPlayer.pause()
      if (this.type === 'video') this.$refs.videoPlayer.pause()
    },
  },
}
</script>
<style lang="scss">
.file-preview {
  width: 100%;
  height: 100%;
  & > * {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .type-txt {
    text-indent: 2em;
    line-height: 1.5;
    .line {
      margin: 5px 0;
    }
  }
  .type-img {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      object-fit: contain;
    }
  }
  .type-video {
    video {
      width: 100%;
      object-fit: contain;
    }
  }
}
</style>